@extends('admin.layout.empty')

@section('title', '登入')

@section('style')
<link rel="stylesheet" href="{{asset('css/admin.css')}}">
<style>
html{
    background: #f2f2f2;
}
.admin-user-login-icon {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 38px;
    line-height: 36px;
    text-align: center;
    color: #d2d2d2;
}

.admin-user-login-body {
    width:375px;
    margin:0 auto;
    padding-top:120px;
}

.admin-user-login-body .layui-form-item {
    position: relative;
}
.admin-user-login-body .layui-form-item .layui-input {
    padding-left: 38px;
}
</style>
@endsection

@section('content')
<div class="admin-user-login-body">
    <div class="layui-card">
        <div class="layui-card-header">
            <h3>
                <i class="layui-icon layui-icon-home"></i>
                宝物交易网（香港站）管理后台
            </h3>
        </div>

        <div class="layui-card-body">
            <div class="register-form">
                <form class="layui-form" id="login-form" method="post" action="" onsubmit="return false;">

                    <div class="layui-form-item">
                        <label for="input-staff-id" class="admin-user-login-icon layui-icon layui-icon-username"></label>
                        <input id="input-staff-id" type="text" name="staff_id" required lay-verify="required" placeholder="工号(10开头)" autocomplete="off" class="layui-input">
                    </div>

                    <div class="layui-form-item">
                        <label for="input-password" class="admin-user-login-icon layui-icon layui-icon-password"></label>
                        <input id="input-password" type="password" name="password" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <label for="input-captcha" class="admin-user-login-icon layui-icon layui-icon-vercode"></label>
                            <input id="input-captcha" type="text" name="captcha" required lay-verify="required" placeholder="验证码" autocomplete="off" class="layui-input">
                        </div>
                        <img id="captcha" src="{{captcha_src('lite')}}" alt="点击更新" style="cursor: pointer;">
                    </div>

                    <div class="layui-form-item">
                        <div style="float:right;">
                            <a id="forget-password" href="javascript:;"><i class="layui-icon">&#xe9aa;</i> 找回密码</a>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block1">
                            <input type="hidden" name="referer" value="{{request('referer', '')}}"/>
                            <button class="layui-btn layui-btn-fluid" lay-submit>
                                <i class="layui-icon layui-icon-chat"></i>
                                登入
                            </button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

@endsection
@section('script')

<script type="text/javascript" src="{{ asset('js/jquery-3.3.1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('vendor/layui/layui.all.js') }}"></script>
<script>
$(function() {
    $('#forget-password').click(function() {
        layer.msg('找管理员帮忙重置吧', {icon: 6, offset: '10px'});
    });

    $('#captcha').click(function() {
        var src = $(this).attr('src');
        src += (/\?/.test(src) ? '&' : '?') + '_=' + (new Date()).getTime();
        $(this).attr('src', src);
    });

    layer.msg('薩瓦迪卡，歡迎使用管理後台！', {icon: 6, offset: '10px', anim: 1});

    $('#login-form').submit(function() {
        var $this   = $(this);
        var referer = $this.find('[name=referer]').val();
        var loader  = layer.load();
        $.ajax({
            url: $this.attr('action'),
            data: $this.serialize(),
            type: 'post',
            dataType: 'json',
            success: function (json) {
                layer.close(loader);
                if (!json.status) {
                    layer.msg(json.message||'出了点小问题', {icon: 5, offset: '10px', anim: 6});
                    $('#captcha').click();
                    return;
                }
                layer.msg(json.message, {icon: 1, offset: '10px', time:100}, function() {
                    window.location.href = json.jump || referer;
                });
            },
            error: function() {
                layer.close(loader);
                layer.message('服务器错误', {icon: 5, offset: '10px', anim: 6});
            }
        })
    });
});
</script>
@endsection
